<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="text/javascript" src="../js/jquery.2.0.3.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.3.3.4.min.js"></script>
		<script type="text/javascript" src="../js/common.js" ></script>
		<link rel="shortcut icon" href="https://yangwenxue.oschina.io/images/favicon.ico">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
		<link href="../css/boostrap_3.3.4.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			.auto-Line-feed {
				word-break: break-all;
			}
		</style>
		<title>分组记忆</title>
	</head>
	<body>
		<h1 class="text-center">分组记忆</h1>
		<div class="section">
			<div class="container">
				<div class="row" data-show-words-search="true">
					<div class="col-md-12">
						<div class="accordion" ixdx="accordion-search">
							<div class="col-md-6">
								<a href="../index.html" class="btn btn-default"><i class="d-block fa fa-home fa-1x"></i>首页</a>
							</div>
							<div class="col-md-6 text-center">
								<input type="text" name="word" class="form-control"  style="display: inline-block; width: auto;" placeholder="请输入单词"/> <button onclick="btnSearch()" class="btn btn-default">搜索</button>
							</div>
						</div>
					</div>
				</div>
				<div class="row" data-show-words-row="true">
					
				</div>
				
			</div>
			<div class="container">
				<div class="row" data-show="page-info">
					<div class="col-md-12">
						<a href="../index.html" class="btn btn-default"><i class="d-block fa fa-home fa-1x"></i>首页</a>
						<ul class="pagination pager" style="float: right; margin-right: 10%;">
							<li class="previous disabled">
								<a href="#" onclick="prev_search(this)">上一页</a>
							</li>
							<li class="previous disabled">
								<input type="hidden" name="pageSize" id="pageSize" value="5" />
								<select id="pageNo" name="pageNo" class="btn btn-primary" onchange="selectChange()" style="width: 100px;margin-right:10px;margin-left:10px;">
								</select>
							</li>
							<li class="next disabled">
								<a href="#" onclick="next_search(this)">下一页</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/NumberToChinese.js" ></script>
		<script type="application/javascript">
			$(function(){
				initGroupWords();
			})
			// 初始化分组单词
			function initGroupWords(pageNo,pageSize){
				if(pageNo == null || pageNo == undefined || pageNo < 1){
					pageNo = 1;
				}
				if(pageSize == null || pageSize == undefined || pageSize < 1){
					pageSize = $("#pageSize").val();
				}
				$.ajax({
					url: resPath + "getGroupWordsByPage/" + pageNo + "/" + pageSize,
					success:function(data){
						initGroupWordHtml(data);
						setPageBtn();
					},error:function(error){
						console.log(error);
						alert("出现异常");
					}
				});
			}
			
			// 初始化分组单词
			function searchGroupWords(word){
				$.ajax({
					url: resPath + "getWordsByParam/" + word,
					success:function(data){
						initGroupWordHtml(data);
						setPageBtn();
					},error:function(error){
						console.log(error);
						alert("出现异常");
					}
				});
			}
			function btnSearch(){
				var word = $("input[name='word']").val();
				word = (word == null || word == undefined || word == "") ? "null" : word
				searchGroupWords(word);
			}
			function selectChange(){
				initGroupWords($("#pageNo").val(),$("#pageSize").val());
			}
			// 上一页
			function prev_search(doc) {
				var isDisabled = $(doc).parent().hasClass("disabled");
				var pageNo = Number($("#pageNo").val());
				if(pageNo == null || pageNo == undefined || pageNo == 1 || isDisabled) return false;
				$("#pageNo").val(pageNo - 1 >= 0 ? pageNo - 1 : 1);
				initGroupWords($("#pageNo").val(),$("#pageSize").val());
			}
			// 下一页
			function next_search(doc) {
				var isDisabled = $(doc).parent().hasClass("disabled");
				var pageNo = Number($("#pageNo").val());
				var pagetotal = Number($("#pageNo option:last").attr("value"));
				if(pageNo == null || pageNo == undefined || pageNo == pagetotal || isDisabled) return false;
				$("#pageNo").val(pageNo + 1 < pagetotal ? parseInt(pageNo) + 1 : pagetotal);
				initGroupWords($("#pageNo").val(),$("#pageSize").val());
			}
			// 设置分页按钮
			function setPageBtn() {
				var pageNo = Number($("#pageNo").val());
				var prevBtn = $("#pageNo").parent().prev();
				var nextBtn = $("#pageNo").parent().next();
				
				if(pageNo == null || pageNo == undefined || pageNo <= 1){
					prevBtn.addClass("disabled");
				}
				var pagetotal = Number($("#pageNo option:last").attr("value"));
				if(pagetotal == null || pagetotal == undefined || pagetotal <= 1 || pageNo == pagetotal){
					nextBtn.addClass("disabled");	
				}
				if(pageNo > 1 && pageNo <= pagetotal){
					prevBtn.removeClass("disabled");
				}
				if(pagetotal > 1 && pagetotal > pageNo){
					nextBtn.removeClass("disabled");
				}
			}
			// 初始化分组的单词HTML
			function initGroupWordHtml(data){
				$("div[data-show-words-row='true']").empty();
				for(var i = 0; i < data.list.length; i ++){
					var appendStr = "";
					word = data.list[i];
					for(var j = 0; j < data.list[i].srcWords.length; j ++){
						var childWord = data.list[i].srcWords[j];
						appendStr = appendStr + '<li class="list-group-item">'
													+'<h3>' + childWord.word + '</h3>'
													+'<p class="auto-Line-feed">音标：' + childWord.ukPhoneticAlphabet + '</p>'
													+'<p class="auto-Line-feed">词义：' + childWord.meaning + '</p>'
													+'<p class="auto-Line-feed">发音：<i class="d-block fa fa-volume-down fa-2x" onclick="playVideo(\'' + childWord.ukSpeakUrl + '\')"></i></p>'
													+'<p class="auto-Line-feed">记忆方式：' + childWord.desc + '</p>'
												+'</li>';
					}
					var str = '<div class="col-md-12">'
								+'<div class="accordion" id="accordion-' + i + '">'
									+'<div class="list-group">'
										+'<div class="accordion-heading">'
											+'<a class="accordion-toggle list-group-item" data-toggle="collapse" data-parent="#accordion-' + i + '" href="#accordion-element-' + i + '">词组' + TransformToChinese(i + 1) + '</a>'
										+'</div>'
										+'<div id="accordion-element-' + i + '" class="collapse in">'
											+'<div class="accordion-inner list-group-item">'
												+'<ul class="list-group">'
													+'<li class="list-group-item">'
														+'<h3>' + word.word + '(*)</h3>'
														+'<p class="auto-Line-feed">音标：' + word.ukPhoneticAlphabet + '</p>'
														+'<p class="auto-Line-feed">词义：' + word.meaning + '</p>'
														+'<p class="auto-Line-feed">发音：<i class="d-block fa fa-volume-down fa-2x" onclick="playVideo(\'' + word.ukSpeakUrl + '\')"></i></p>'
														+'<p class="auto-Line-feed">记忆方式：' + word.desc + '</p>'
													+'</li>'
													+ appendStr
												+'</ul>'
											+'</div>'
										+'</div>'
									+'</div>'
								+'</div>'
							+'</div>';
					
					$("div[data-show-words-row='true']").append(str);
				}
				var pageSize = $("#pageSize").val();
				var pageTotal = 1;
				pageTotal = data.total % pageSize > 0 ? (data.total / pageSize + 1) : data.total / pageSize;
				$("#pageNo").empty();
				for(var i = 1; i <= pageTotal; i++) {
					$("#pageNo").append('<option value="' + i + '">' + i + '</option>')
				}
				$("#pageNo").val(data.page);
			}
			
			
		</script>
	</body>

</html>